<template>
    <div class="origin-info">
        <el-form ref="ruleForm" label-width="170px" label-position="left" class="demo-ruleForm clear" v-if="Object.keys(sourceList).length != 0">
            <template v-for="(item,key) in sourceList">
                <!-- type==1 input框 -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 1" :label="item.field_name" :key="key" >
                    <el-input v-model="item.content.content" @change.native="initValue(item)" :placeholder="'请输入'+item.field_name" :disabled="!editable"></el-input>
                </el-form-item>
               
                <!-- type==2 图片型 -->
                <!-- type==3 radio(如：男、女) -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 3" :label="item.field_name" :key="key" >
                    <el-radio-group v-model="item.content.content" :disabled="!editable">
                        <el-radio v-for="(item2, key2) in item.field_option" :label="key2+1" :key="key2">{{item2}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- type==4 时间型 -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 4" :label="item.field_name" :key="key" >
                    <el-date-picker
                        v-model="item.content.content"
                        type="date"
                        :disabled="!editable"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <!-- type==5 下拉窗 -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 5" :label="item.field_name" :key="key" >
                    <el-select v-model="item.content.content" :placeholder="'请选择' + item.field_name" :disabled="!editable">
                        <el-option
                            v-for="(item3, key3) in item.field_option"
                            :key="key3"
                            :label="item3"
                            :value="key3+1">
                        </el-option>
                    </el-select>
                </el-form-item>

             <!-- type==6 textarea -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 6" :label="item.field_name" :key="key" >
                    <el-input type="textarea" @change.native="initValue(item)" v-model="item.content.content" :placeholder="'请选择' + item.field_name" maxlength="200" show-word-limit :disabled="!editable"></el-input>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
    export default{
        props:['editable'],
        data(){
            return {
                sourceList: {}, // 来源信息
                SourceList: {}, // 默认来源信息
            }
        },
        created() {
            // 获取表单信息
            this.getList();
        },
        methods: {
            /**
            * 获取信息
            * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
            */
            getList() {
                let success = (res => {
                    this.sourceList = deep_clone(res.data);
                    this.SourceList = deep_clone(res.data);
                    // console.log('origin:',this.sourceList)

                    if (!is_empty(res.data.studystatus)) {
                        res.data.studystatus.forEach(item => {
                            if (item.id === 18) {
                                if (item.content.content != null) {
                                    this.previewImgURL = this.BASE_URL + deep_clone(item.content.content);
                                }
                            }
                        })
                    }
                
                });
                let params = {
                    user_id: this.$g.user_id,
                    from_type: 3,
                }
                
                this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
            },
            // 初始化输入框的值
            initValue(a){
                if(a.content.content === ''){
                    a.content.content = null
                }
            },
            // 表单验证
            submitForm(formName) {
                // console.log('sourceList:',this.sourceList)
                // console.log('SourceList:',this.SourceList)

                let param = {arr: []};
                param.arr['user_id'] = this.$g.user_id;
                param.arr['cource'] = [];

                this.sourceList.forEach(item => {
                    let _arr = {
                        field_id: item.id,
                        content: item.content.content
                    }

                    param.arr['cource'].push(_arr);
                })

                const success = (res => {
                    let status;
                    if(res.status == 'success'){
                        status = true;

                        // 更新表单信息
                        this.getList();
                    }else{
                        status = false;
                    }

                    this.$emit('changeSaveStatus', status)
                })

                this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success}});
            },
            // 检测当前板块有没有修改
            contrast(){
                // console.log('sourceList:',JSON.stringify(this.sourceList) == JSON.stringify(this.SourceList))
                // console.log('sourceList:',deep_clone(this.sourceList), deep_clone(this.SourceList))
                return JSON.stringify(this.sourceList) == JSON.stringify(this.SourceList)
            },
            // 取消编辑
            cancelEdit(){
                this.sourceList = deep_clone(this.SourceList);
            },
        }
    }
</script>
<style lang="scss">
    .origin-info{
        .el-form{
            .el-form-item{
                width:500px;
                &:nth-child(odd){
                    float:left;
                }
                &:nth-child(even){
                    float:right;
                }
                // .el-form-item__label{
                //     padding:0;
                //     font-size: 14px;
                //     color: #333333;
                //     letter-spacing: 0.08px;
                //     &::before{
                //         content:''
                //     }
                // }
                .el-form-item__content{
                    .el-form-item{
                        width:100%;
                    }
                    // areatext输入框
                    .el-textarea{
                        .el-textarea__inner{
                            height:120px !important;
                            resize:none;
                        }
                    }
                    // 日期编辑框
                    .el-date-editor{
                        width:100%;
                        cursor:opinter;
                    }
                    // 下拉选择框
                    .el-select{
                        width:100%;
                        .el-input{
                            .el-input__suffix{
                                .el-input__suffix-inner{
                                    .el-select__caret{
                                        color:#231815;
                                    }
                                }
                            }
                        }
                    }

                    // 在不可编辑时的样式
                    .is-disabled{
                        .el-textarea__inner{
                            color: #333;
                            border-radius:0;
                            background-color: #EFEFEF;
                            border-color: #DDDDDD;
                        }
                    }
                    
                    // input框不可编辑时的样式
                    .el-input.is-disabled{
                        .el-input__inner{
                            color: #333;
                            border-radius:0;
                            background-color: #EFEFEF;
                            border-color: #DDDDDD;
                        }
                    }
                }
            }
        }
    }
</style>